<template>


	<view class="ui-car-select">
		<view class="ui-car-name-list">
			<view class="ui-car-name-item" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="index" @tap="tabChange">{{item.cartype}}</view>
		</view>
		<view>
			<swiper class="ui-carinfos" @change="swiperChange" :current="current">
				<!-- <swiper-item class="ui-carinfo-item" v-for="(item,index) in carinfos">{{item.carinfo}}</swiper-item> -->
				<swiper-item class="ui-carinfo-item" >
					<view class="flex item">
						<text>商业贷款金额</text>
						<input type="text" value="" placeholder="请输入商业贷款金额" />
					</view>
					<view class="flex item">
						<text>商业贷款按揭年数</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
					<view class="flex item">
						<text>商贷利率</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
				</swiper-item>
				<swiper-item class="ui-carinfo-item" >
					<view class="flex item">
						<text>公积金贷款金额</text>
						<input type="text" value="" placeholder="请输入商业贷款金额" />
					</view>
					<view class="flex item">
						<text>公积金按揭年数</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
					<view class="flex item">
						<text>公积金利率</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
				</swiper-item>
				<swiper-item class="ui-carinfo-item" >
					<view class="flex item">
						<text>商业贷款金额</text>
						<input type="text" value="" placeholder="请输入商业贷款金额" />
					</view>
					<view class="flex item">
						<text>商业贷款按揭年数</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
					<view class="flex item">
						<text>商贷利率</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
					<view class="flex item">
						<text>公积金贷款金额</text>
						<input type="text" value="" placeholder="请输入商业贷款金额" />
					</view>
					<view class="flex item">
						<text>公积金按揭年数</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
					<view class="flex item">
						<text>公积金利率</text>
						<text>1<image class="next" src="../../static/imgs/ic_right_gray.png" mode=""></image></text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	
</template>

<script>
	export default {
		components: {

		},
		
		data() {
					return {
						visible: false,
						current:0,
						carTypes:[{
							cartype:"商业贷款"
							},{
								cartype:"公积金贷款"
							},{
								cartype:"混合贷款"
							}
						],
						carinfos:[{
							carinfo:"小面包"
							},{
								carinfo:"中面包"
							},{
								carinfo:"小货车"
							},{
								carinfo:"中货车"
						}]
					}
				},
		methods:{
			tabChange:function(e){
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current=index;
			},
			swiperChange:function(e) {			
				var index=e.target.current || e.detail.current;
				this.current = index;
			}
		}

		
	}
</script>

<style scoped lang="scss">
	.ui-car-select{
		width: 100%;
		padding: 0 24upx;
		.ui-car-name-list{
		display: flex;
		.ui-car-name-item{
			width: 33.3%;
			text-align: center;
			padding: 30upx 0;
			position: relative;
			
			
		}
		::after{
			position: absolute;
			content: '';
			display: block;
			width:48upx;
			height:4upx;
			bottom: 0upx;
			background:linear-gradient(90deg,rgba(255,26,118,1) 0%,rgba(255,123,41,1) 100%);
			left: 50%;
			margin-left: -24upx;
			display: none;
		}
		
		.ui-car-name-item.active{
			color: #FF1A76;
			
		}
		.ui-car-name-item.active::afte{
			display: block;
		}
		
		
	}
	.ui-carinfos{
		height: calc(100vh - 200upx);
	}
	.ui-carinfo-item{
		margin-top: 20upx;
		
		.item{
			justify-content: space-between;
			padding: 35upx 0;
			border-bottom: 1px solid #EEEEEE;
			font-size:30upx;
			color:rgba(34,34,34,1);
			input{
				font-size: 28upx;
				text-align: right;
			}
		}
	}
	.next{
		width:14upx;
		height:24upx;
		margin-left: 20upx;
	}
	}
	
</style>
